<template>
	<view class="my_income">
		<i-scrollList margin="180rpx" @more="more" height="100vh" :total="pageData.total" :pageTotal="pageList.length">
			<i-card top="20rpx" padding="40rpx 34rpx" background="#FB652E">
				<view class="card_list">
					<view class="item" >
						<text>今日门店收益</text>
						<text class="price">{{topData.todayStoreIncome || 0}}</text>
					</view>
					<view class="item">
						<text>今日会员收益</text>
						<text class="price">{{topData.todayVipIncome || 0}}</text>
					</view>
					<view class="item">
						<text>本月门店收益</text>
						<text class="price">{{topData.monthStoreIncome || 0}}</text>
					</view>
					<view class="item">
						<text>本月会员收益</text>
						<text class="price">{{topData.monthVipIncome || 0}}</text>
					</view>
					<view class="item">
						<text>累计门店收益</text>
						<text class="price">{{topData.totalStoreIncome || 0}}</text>
					</view>
					<view class="item">
						<text>累计会员收益</text>
						<text class="price">{{topData.totalVipIncome || 0}}</text>
					</view>
				</view>
			</i-card>
			<view class="title_text">
				<text @click="changeActive(0)" :class="{active: active===0}">门店收益</text>
				<text @click="changeActive(1)" :class="{active: active===1}">会员收益</text>
			</view>
			<i-card bottom="24rpx" v-for="(item,index) in pageList" :key="index" @click="toDetail(item)">
				<view class="pageData_t">
					<view class="titile_l">
						<view class="title_name">
							<text class="ti">{{ active ? item.accountChangesBusinessTypeLabel : (item.isOnlinePay ?  '扫码核销' : '在线付款')}}</text>
							<text
								v-if="active && item.accountTrend  === '10004002'">（{{item.accountTrend === '10004001' ? '存入' : '退款'}}）</text>
							<text
								v-else-if="item.rechangeStatus">（{{rechange_channel_type[item.rechangeStatus]}}）</text>
						</view>
						<view class="title_time">
							<text>手机号：{{mobileEncryption(item.mobile)}}</text>
							<text>时间：{{ active ? item.createTime : item.useTime}}</text>
						</view>
					</view>
					<view>
						<text class="price">{{priceFormat(item.income)}}</text>
					</view>

				</view>
				<view class="pageData_b">
					<text>{{ active ? item.vipLevelLabel : item.goodsName}}</text>
				</view>
			</i-card>
			<view v-if="skeleton" v-for="item in 10" :key="item" style="margin-top: 20rpx;">
				<i-skeleton :icon="false" :rowsW="['80%', '60%','60%','60%',]"
					:rowsH="['32rpx', '26rpx' ,'26rpx','26rpx']" size="64rpx" height="280rpx" :rows="4">
				</i-skeleton>
			</view>
		</i-scrollList>
	</view>
</template>

<script lang="ts" setup>
	import {
		priceFormat,
		navTo,
		mobileEncryption
	} from '../../utils/common'
	import {
		computed,
		reactive,
		ref,
		onMounted
	} from 'vue'
	import {
		apiListMerGoodsOrderIncomeSummary,
		apiListMerGoodsOrderIncome,
		apiListVipOrderIncome
	} from '../../api/store'
	import useStore from '../../stores/index'
	import { rechange_channel_type } from '../../utils/enums'

	const store = useStore()
	const skeleton = ref(true);
	const active = ref(0);

	const storeInfo = computed(() => {
		return store.storeInfo
	})

	const topData = reactive({
		monthIncome: 0,
		todayIncome: 0,
		totalIncome: 0,
		
		todayStoreIncome:0,
		monthStoreIncome:0,
		totalStoreIncome:0,
		
		todayVipIncome:0,
		monthVipIncome:0,
		totalVipIncome:0,
	})

	const pageData = reactive({
		total: 0,
		tyjPageNum: 1,
		tyjPageSize: 15,
	})
	const pageList = ref<ApiListMerGoodsOrderIncomeRes['rows'][]>([])

	const more = () => {
		pageData.tyjPageNum++
		getPageList()
	}

	const getPageList = async () => {
		const data = active.value === 0 ? await apiListMerGoodsOrderIncome({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize
		}) : await apiListVipOrderIncome({
			tyjPageNum: pageData.tyjPageNum,
			tyjPageSize: pageData.tyjPageSize
		})
		pageList.value = pageList.value.concat(data.rows)
		pageData.total = data.total
		skeleton.value = false
	}

	const toDetail = (item : { vipOrderId ?: string, merOrderId ?: string }) => {
		if (!active.value) {
			navTo('/pages/orderDetail/storeSelf_detail?merOrderId=' + item.merOrderId, 'navigateTo')
		}
	}

	const getTopData = async () => {
		const { data } = await apiListMerGoodsOrderIncomeSummary()
		topData.monthIncome = data.monthIncome
		topData.todayIncome = data.todayIncome
		topData.totalIncome = data.totalIncome
		
		topData.todayStoreIncome = data.todayStoreIncome
		topData.monthStoreIncome = data.monthStoreIncome
		topData.totalStoreIncome = data.totalStoreIncome
		
		topData.todayVipIncome = data.todayVipIncome
		topData.monthVipIncome = data.monthVipIncome
		topData.totalVipIncome = data.totalVipIncome
		console.log(data, 'data');
	}

	const changeActive = (i : number) => {
		skeleton.value = true
		active.value = i
		pageData.tyjPageNum = 1
		pageList.value = []
		getPageList()

	}
	onMounted(() => {
		getTopData()
		getPageList()
	})
</script>

<style lang="scss" scoped>
	.my_income {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #f3f4f5;

		.title_text {
			margin: 24rpx 0 24rpx 32rpx;
			@include titlefont(32rpx);
			height: 88rpx;
			@include flexR;

			text {
				@include contentfont(28rpx);
				margin-right: 32rpx;
				transition: all ease-out 0.3s;
			}

			.active {
				font-size: 36rpx;
				font-weight: bold;
				color: $title-color;
			}
		}

		.card_title {
			@include titlefont(32rpx);
			margin-bottom: 32rpx;

		}

		.card_list {
			@include flexRS;
			flex-wrap: wrap;

			.item {
				width: 50%;
				@include flexC;
				@include contentfont(26rpx);
				color: #fff;

				.price {
					@include dprice(36rpx);
					color: #fff;
					margin-bottom: 16rpx;
				}
			}

		}

		.pageData_t {
			@include flexRS;
			width: 100%;
			padding-bottom: 24rpx;
			border-bottom: 1rpx solid $line-color;
			align-items: flex-start;

			.titile_l {
				@include flexC;
			}

			.title_name {
				@include flexR;
				@include contentfont(28rpx);
				margin-bottom: 18rpx;

				text {
					@include titlefont(28rpx);
					margin-right: 4rpx;
				}
			}

			.title_time {
				@include flexC;
				@include contentfont(26rpx);

				text {
					margin-bottom: 8rpx;
				}
			}

			.price {
				@include titlefont(28rpx);
			}
		}

		.pageData_b {
			@include overflow;
			margin-top: 24rpx;

			text {
				@include contentfont(26rpx);
				@include overflow;
			}
		}
	}
</style>